<template>
  <view>
    <editor id="editor" :placeholder="placeholder" @ready="onEditorReady"></editor>
    <view style="display: flex;">
      <button type="primary" @tap="undo">撤销</button>
      <button type="primary" @tap="insertDivider">插入分割线</button>
      <button type="primary" @tap="insertImage">插入图片</button>
      <button type="primary" @tap="saveEditor">保存editor页面</button>
      <button type="primary" @tap="pasteEditor">镜像另一个editor页面</button>
    </view>
    <view>
      <view>这里另外一个editor</view>
      <view>
        <editor id="editor2" class="ql-container" placeholder="这里另外一个editor" @ready="onEditorReady2"></editor>
      </view>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        placeholder: '开始输入...',
        tempDelta: {}
      }
    },
    methods: {
      onEditorReady() {

        // #ifdef MP-BAIDU
        this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
        // #endif

        // #ifdef APP-PLUS || H5 ||MP-WEIXIN
        uni.createSelectorQuery().select('#editor').context((res) => {
          this.editorCtx = res.context
        }).exec()
        // #endif
      },
      onEditorReady2() {
 

        // #ifdef APP-PLUS || H5 ||MP-WEIXIN
        uni.createSelectorQuery().select('#editor2').context((res) => {
          this.editorCtx2 = res.context
        }).exec()
        // #endif
      },
      undo() {
        this.editorCtx.undo()
      },
      insertDivider() {

        this.editorCtx.insertDivider()
      },
      insertImage() {
        var that = this
        uni.chooseImage({
          success(res) {

            console.log('选择图片成功')
            console.log(res)
            that.editorCtx.insertImage({
              width: '20%',
              height: '20%',
              src: res.tempFilePaths[0]
            })
          }
        })
      },
      saveEditor() {
        var that = this
        this.editorCtx.getContents({
          success(res) {
            // debugger
            that.tempDelta = res.delta
            console.log(res)
          }
        })

      },
      pasteEditor() {
        debugger
        this.editorCtx2.setContents({
          delta: this.tempDelta,
          complete(res){
            debugger
          }
        })
      },

    }
  }
</script>

<style>

</style>

